From 1eee181e219dfd993d396ac3169e7aad3dd285eb Mon Sep 17 00:00:00 2001 From: Factiven Date: Sun, 16 Jul 2023 22:35:39 +0700 Subject: Update v3.6.4 - Added Manga page with a working tracker for AniList user - Added schedule component to home page - Added disqus comment section so you can fight on each other (not recommended) - Added /id and /en route for english and indonesian subs (id route still work in progress) --- pages/id/anime/watch/[...info].js | 488 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 488 insertions(+) create mode 100644 pages/id/anime/watch/[...info].js (limited to 'pages/id/anime/watch/[...info].js') diff --git a/pages/id/anime/watch/[...info].js b/pages/id/anime/watch/[...info].js new file mode 100644 index 0000000..89fd3a6 --- /dev/null +++ b/pages/id/anime/watch/[...info].js @@ -0,0 +1,488 @@ +import Image from "next/image"; +import Link from "next/link"; +import Head from "next/head"; +import { useEffect, useState } from "react"; +import dynamic from "next/dynamic"; + +import { getServerSession } from "next-auth/next"; +import { authOptions } from "../../../api/auth/[...nextauth]"; + +import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; + +import { Navigasi } from "../.."; +import { ChevronDownIcon, ForwardIcon } from "@heroicons/react/24/solid"; +import { useRouter } from "next/router"; + +import { GET_MEDIA_USER } from "../../../../queries"; + +import dotenv from "dotenv"; + +import VideoPlayer from "../../../../components/id-components/player/VideoPlayerId"; + +export default function Info({ sessions, id, aniId, provider, api, proxy }) { + const [epiData, setEpiData] = useState(null); + const [data, setAniData] = useState(null); + const [episode, setEpisode] = useState(null); + const [skip, setSkip] = useState({ op: null, ed: null }); + const [statusWatch, setStatusWatch] = useState("CURRENT"); + const [playingEpisode, setPlayingEpisode] = useState(null); + const [loading, setLoading] = useState(false); + const [playingTitle, setPlayingTitle] = useState(null); + const [poster, setPoster] = useState(null); + const [progress, setProgress] = useState(0); + const [currentNumber, setCurrentNumber] = useState(null); + + const [episodes, setEpisodes] = useState([]); + const [artStorage, setArtStorage] = useState(null); + + const router = useRouter(); + + useEffect(() => { + const defaultState = { + epiData: null, + skip: { op: null, ed: null }, + statusWatch: "CURRENT", + playingEpisode: null, + loading: false, + }; + + // Reset all state variables to their default values + Object.keys(defaultState).forEach((key) => { + const value = defaultState[key]; + if (Array.isArray(value)) { + value.length + ? eval( + `set${ + key.charAt(0).toUpperCase() + key.slice(1) + }(${JSON.stringify(value)})` + ) + : eval(`set${key.charAt(0).toUpperCase() + key.slice(1)}([])`); + } else { + eval( + `set${key.charAt(0).toUpperCase() + key.slice(1)}(${JSON.stringify( + value + )})` + ); + } + }); + + const fetchData = async () => { + let currentNumber = null; + try { + const res = await fetch( + `https://ani-indo.vercel.app/get/watch/${aniId}` + ); + const epiData = await res.json(); + currentNumber = epiData.episodeActive; + setCurrentNumber(currentNumber); + setEpisode(epiData.data); + setEpiData(epiData.episodeUrl); + } catch (error) { + setTimeout(() => { + window.location.reload(); + }, 3000); + } + + let aniData = null; + setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings"))); + + const res2 = await fetch(`${api}/meta/anilist/info/${id}`); + aniData = await res2.json(); + setEpisodes(aniData.episodes?.reverse()); + setAniData(aniData); + + let playingEpisode = aniData.episodes + .filter((item) => item.number == currentNumber) + .map((item) => item.number); + + setPlayingEpisode(playingEpisode); + + const playing = aniData.episodes.filter((item) => item.id == id); + + setPoster(playing); + + const title = aniData.episodes + .filter((item) => item.id == id) + .find((item) => item.title !== null); + setPlayingTitle( + title?.title || aniData.title?.romaji || aniData.title?.english + ); + + const res4 = await fetch( + `https://api.aniskip.com/v2/skip-times/${aniData.malId}/${parseInt( + playingEpisode + )}?types[]=ed&types[]=mixed-ed&types[]=mixed-op&types[]=op&types[]=recap&episodeLength=` + ); + const skip = await res4.json(); + + const op = skip.results?.find((item) => item.skipType === "op") || null; + const ed = skip.results?.find((item) => item.skipType === "ed") || null; + + setSkip({ op, ed }); + + if (sessions) { + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: GET_MEDIA_USER, + variables: { + username: sessions?.user.name, + }, + }), + }); + + const dat = await response.json(); + + const prog = dat.data.MediaListCollection; + + const gat = prog?.lists.map((item) => item.entries); + const git = gat?.map((item) => + item?.find((item) => item.media.id === parseInt(aniId)) + ); + const gut = git?.find((item) => item?.media.id === parseInt(aniId)); + + if (gut) { + setProgress(gut.progress); + } + + if (gut?.status === "COMPLETED") { + setStatusWatch("REPEATING"); + } else if ( + gut?.status === "REPEATING" && + gut?.media?.episodes === parseInt(playingEpisode) + ) { + setStatusWatch("COMPLETED"); + } else if (gut?.status === "REPEATING") { + setStatusWatch("REPEATING"); + } else if (gut?.media?.episodes === parseInt(playingEpisode)) { + setStatusWatch("COMPLETED"); + } else if ( + gut?.media?.episodes !== null && + aniData.totalEpisodes === parseInt(playingEpisode) + ) { + setStatusWatch("COMPLETED"); + setLoading(true); + } + } + setLoading(true); + }; + fetchData(); + }, [id, aniId, provider, sessions]); + + useEffect(() => { + const mediaSession = navigator.mediaSession; + if (!mediaSession) return; + + const artwork = + poster && poster.length > 0 + ? [{ src: poster[0].image, sizes: "512x512", type: "image/jpeg" }] + : undefined; + + mediaSession.metadata = new MediaMetadata({ + title: playingTitle, + artist: `Moopa ${ + playingTitle === data?.title?.romaji + ? "- Episode " + playingEpisode + : `- ${data?.title?.romaji || data?.title?.english}` + }`, + artwork, + }); + }, [poster, playingTitle, playingEpisode, data]); + + return ( + <> + + {playingTitle || "Loading..."} + + + +
+ +
+
+ {loading ? ( + Array.isArray(epiData) ? ( +
+ +
+ ) : ( +
+

+ Whoops! Something went wrong. Please reload the page or + try other sources. {`:(`} +

+
+ ) + ) : ( +
+ )} +
+ {data && data?.episodes.length > 0 ? ( + data.episodes + .filter((items) => items.number == currentNumber) + .map((item, index) => ( +
+
+
+ + {item.title || + data.title.romaji || + data.title.english} + +
+

+ Episode {item.number} +

+
+
+
+ + +
+ +
+
+ )) + ) : ( +
+
+
+ +
+
+

+ +

+
+ )} +
+ +
+
+ {data ? ( + Anime Cover + ) : ( + + )} +
+
+
+

+ Studios +

+
+ {data ? data.studios : } +
+
+
+ + + +
+
+
+
+

+ Status +

+
{data ? data.status : }
+
+
+

+ Titles +

+
+ {data ? ( + <> +
+ {data.title.romaji || ""} +
+
+ {data.title.english || ""} +
+
+ {data.title.native || ""} +
+ + ) : ( + + )} +
+
+
+
+
+ {data && + data.genres.map((item, index) => ( +
+ {item} +
+ ))} +
+
+ {data && ( +

+ )} +

+
+
+
+

+ Up Next +

+
+ {data && data?.episodes.length > 0 ? ( + episode.map((item, index) => { + return ( + + Episode {index + 1} + + ); + }) + ) : ( + <> + {[1].map((item) => ( + + ))} + + )} +
+
+
+
+ + + ); +} + +export async function getServerSideProps(context) { + dotenv.config(); + + const API_URI = process.env.API_URI; + + const session = await getServerSession(context.req, context.res, authOptions); + + const proxy = process.env.PROXY_URI; + + const { info } = context.query; + if (!info) { + return { + notFound: true, + }; + } + + const id = info[0]; + const aniId = [info[1], info[2], info[3]]; + + return { + props: { + sessions: session, + id, + aniId: aniId.join("/"), + proxy, + api: API_URI, + }, + }; +} -- cgit v1.2.3